<template>
  <el-dialog
    :title="dialogPayObj.title"
    append-to-body
    :visible.sync="dialogPayObj.show"
    :close-on-click-modal="false"
    width="1300px"
  >
    <el-form
      ref="form"
      :model="form"
      label-width="120px"
      :disabled="dialogPayObj.read"
      v-if="dialogPayObj.show"
      status-icon
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="客户：" prop="customerList">
            <el-select
              v-model="form.customerId"
              placeholder="请选择"
              style="width:530px;"
              size="mini"
              :disabled="dialogPayObj.id != ''"
            >
              <el-option
                v-for="(data, index) in customerList"
                :key="index"
                :label="data.customerName"
                :value="data.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态：" prop="status">
            <el-select
              v-model="form.status"
              placeholder="请选择"
              style="width:200px;"
              size="mini"
              :disabled="dialogPayObj.id != ''"
            >
              <el-option
                v-for="(data, index) in applyStatusList"
                :key="index"
                :label="data.value"
                :value="data.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="分类：" prop="applyCategory">
            <el-select
              v-model="form.applyCategory"
              placeholder="请选择"
              style="width:200px;"
              size="mini"
              :disabled="dialogPayObj.id != ''"
            >
              <el-option
                v-for="(data, index) in applyCategoryList"
                :key="index"
                :label="data.value"
                :value="data.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="类型：" prop="applyType">
            <el-select
              v-model="form.applyType"
              placeholder="请选择"
              style="width:200px;"
              size="mini"
              :disabled="dialogPayObj.id != ''"
            >
              <el-option
                v-for="(data, index) in applytype"
                :key="index"
                :label="data.value"
                :value="data.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="申请名称：" prop="title">
            <el-input
              v-model="form.title"
              style="width:1140px;"
              size="mini"
              :disabled="dialogPayObj.id != ''"
              placeholder="请输入专利名"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="申请号：" prop="applyNumber">
            <el-input
              v-model="form.applyNumber"
              style="width:200px;"
              size="mini"
              :disabled="dialogPayObj.id != ''"
              placeholder="请输入专利申请号"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="申请日：" prop="applyDatetime">
            <el-date-picker
              v-model="form.applyDatetime"
              style="width:200px;"
              size="mini"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :disabled="dialogPayObj.id != ''"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="更新记录：" prop="legal">
        <record-list
          :tableData="tableData"
          :patentManageId="form.id"
          @handleTableDate="handleTableDate"
        >
        </record-list>
      </el-form-item>
      <el-form-item label="推送消息：" prop="legal">
        <message-list
          :tableData="messageTableData"
          :patentManageId="form.id"
          @handleTableDate="handleTableDate"
        >
        </message-list>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogPayObj.show = false" size="mini">
        关 闭
      </el-button>
    </span>
  </el-dialog>
</template>
<script>
import { _debounce } from "@u/debounce";
import recordList from "./recordList";
import messageList from "./messageList";
import {
  getCustomerListApi,
  getApplyRecordApi,
  getApplyMessageApi
} from "@s/api";
import {
  PATENTTYPELIST,
  ISNOTLIST,
  APPLYSTATUSLIST,
  APPLYCATEGORYLIST
} from "@u/wordbook";
export default {
  name: "dialogRecordList",
  props: ["dialogPayObj"],
  components: {
    recordList,
    messageList
  },
  data() {
    return {
      form: {
        id: "",
        customerId: "",
        title: "",
        applicationNumber: "",
        applicationDatetime: "",
        feeList: ""
      },
      patentTypeList: PATENTTYPELIST,
      isNotList: ISNOTLIST,
      applyStatusList: APPLYSTATUSLIST,
      applyCategoryList: APPLYCATEGORYLIST,
      patentManageId: "",
      tableData: [],
      messageTableData: [],
      applytype: [],
      customerList: []
    };
  },
  methods: {
    // 客户信息
    getCustomerSelect() {
      getCustomerListApi().then(res => {
        this.customerList = res;
      });
    },
    initDialog() {
      if (this.dialogPayObj.id) {
        this.form.id = this.dialogPayObj.id;
        let json = { applyId: this.dialogPayObj.id };
        getApplyRecordApi(json).then(res => {
          this.form.customerId = res.customerId;
          this.form.title = res.title;
          this.form.applyNumber = res.applyNumber;
          this.form.applyDatetime = res.applyDatetime;
          this.form.applyCategory = res.applyCategory;
          this.form.applyType = res.applyType;
          this.form.status = res.status;
          this.applytype = this.applyCategoryList[res.applyCategory - 1].type;
          if (res.applyRecordList && res.applyRecordList.length > 0) {
            this.tableData = res.applyRecordList;
          } else {
            this.tableData = [];
          }
          let jsonNum = { orderNumber: res.orderNumber };
          getApplyMessageApi(jsonNum).then(msgs => {
            this.messageTableData = msgs;
          });
        });
      } else {
        this.form.id = "";
        this.form.customerId = "";
        this.form.title = "";
        this.form.applicationNumber = "";
        this.form.applicationDatetime = "";
        this.tableData = [];
      }
    },
    handleTableDate() {},
    sub: _debounce(function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.dialogPayObj.id) {
            this.updateSub();
          }
        }
      });
    }),
    updateSub() {},
    /*限制  正数且最多保留两位小数 */
    validateNumber(value, isZero) {
      var reg = /^(\+?[1-9][0-9]*|\d+\.\d{1,2})$/;
      if (isZero && value == 0) {
        return true;
      }
      if (value && !reg.test(value)) {
        return false;
      } else {
        return true;
      }
    },
    selectIsAgentOption(val) {
      if (val == "0") {
        this.agentStatus = true;
      } else {
        this.agentStatus = false;
      }
    },
    selectRoleOption(val) {
      // 初始选择值
      // 是否有活动或者楼层的选择
      // 如果选择为
      let arr = this.RoleSelectList;
      arr.forEach(item => {
        if (item.roleId == val) {
          this.selectRoleOptionLabel(item.name);
        }
      });
    }
  },
  watch: {
    "dialogPayObj.show"(val) {
      if (val) {
        this.getCustomerSelect();
        this.initDialog();
      }
    }
  }
};
</script>
<style scoped lang="scss"></style>
